<template>
	<view>
		<!--头部-->
		<view class="status_bar"></view>
		<view class="head flex-row">
			<view class="left" @click="goBack"><uni-icons type="arrowleft" size="24" color="#333"></uni-icons></view>
			<view class="center">考试题目</view>
			<view class="right" @click="showCard">答题卡</view>
		</view>
		<!--顶部-->
		<view class="main-top">
			<view class="title">模拟考试</view>
			<view class="count flex-row">
				<view class="left flex-row">
					<image src="../../../static/img/education/timer.png"></image>
					<text>60分钟</text>
				</view>
				<view class="right flex-row">
					<text>{{ index+1 }}</text>
					<text>/ {{ list.length }}</text>
				</view>
			</view>
		</view>
		<!--试题-->
		<swiper @change="changeQuestion" :current="index" previous-margin="10upx" next-margin="10upx">
			<swiper-item v-for="(item, index) in list" :key="index">
				<view class="swiper-item">
					<view class="title">{{ item.type ? '选择题' : '判断题' }}（{{ item.point }}分/每题）</view>
					<view class="content">{{ item.question }}</view>
					<view class="title">选项</view>
					<!--选择题-->
					<view v-if="item.type" class="content check">
						<view class="flex-row">
							<view class="label">A、{{ item.answer_A }}</view>
							<uni-icons v-if="item.answer == 'A'" type="checkbox-filled" color="#51AEE6" size="24"></uni-icons>
							<uni-icons v-if="item.answer != 'A'" type="circle" color="#ddd" size="24"></uni-icons>
						</view>
						<view class="flex-row">
							<view class="label">B、{{ item.answer_B }}</view>
							<uni-icons v-if="item.answer == 'B'" type="checkbox-filled" color="#51AEE6" size="24"></uni-icons>
							<uni-icons v-if="item.answer != 'B'" type="circle" color="#ddd" size="24"></uni-icons>
						</view>
						<view class="flex-row">
							<view class="label">C、{{ item.answer_C }}</view>
							<uni-icons v-if="item.answer == 'C'" type="checkbox-filled" color="#51AEE6" size="24"></uni-icons>
							<uni-icons v-if="item.answer != 'C'" type="circle" color="#ddd" size="24"></uni-icons>
						</view>
						<view class="flex-row">
							<view class="label">D、{{ item.answer_D }}</view>
							<uni-icons v-if="item.answer == 'D'" type="checkbox-filled" color="#51AEE6" size="24"></uni-icons>
							<uni-icons v-if="item.answer != 'D'" type="circle" color="#ddd" size="24"></uni-icons>
						</view>
					</view>
					<!--判断题-->
					<view v-else class="content judge flex-row">
						<uni-icons type="checkbox" v-if="item.answer == '正确'" color="#51AEE6" size="60"></uni-icons>
						<uni-icons type="checkbox" v-if="item.answer != '正确'" color="#eeeeee" size="60"></uni-icons>
						<uni-icons type="close" v-if="item.answer == '错误'" color="#51AEE6" size="60"></uni-icons>
						<uni-icons type="close" v-if="item.answer != '错误'" color="#eeeeee" size="60"></uni-icons>
					</view>
					<!--结果-->
					<view class="result" :class="{error: !item.is_right}">
						{{ item.is_right ? '回答正确' : `回答错误，正确答案 ${item.right_answer}` }}
					</view>
					<!--解析-->
					<view class="title">答案解析</view>
					<view class="content">{{ item.explain || '暂无答案解析' }}</view>
					<!--标签-->
					<view v-if="index < list.length - 1" class="tag"> 《 左右滑动翻页 》 </view>
					<!--提交-->
					<view v-else class="tag btn"><button @click="goBack" type="primary" size="mini">返回</button></view>
				</view>
			</swiper-item>
		</swiper>
		<!--答题卡-->
		<uni-popup ref="popup" type="bottom">
			<view class="answer-card">
				<view class="answer-card-title"><text>答题卡</text></view>
				<view class="answer-card-content">
					<view v-for="(item, index) in list" :key="index">
						<view v-if="item.answer" @click="toQuestion(index)" class="item" :class="[item.is_right ? 'success' : 'error']">{{ index+1 }}</view>
						<view v-else @click="toQuestion(index)" class="item">{{ index+1 }}</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import { date,secondsToFormatTime } from '@/common/function.js';
export default{
	components: { uniIcons,uniPopup },
	data(){
		return {
			isShowCard: false,
			index: 0,
			list: [],
			userid: uni.getStorageSync('userid')
		}
	},
	onLoad(option){
		// 获取试卷类型：imitate-模拟考试,formal-正式考试
		this.type = option.type;
		this.log_id = option.id;
		this.getDetail();
	},
	onBackPress(){
		if(this.isShowCard){
			this.$refs.popup.close();
			return true;
		}
	},
	methods: {
		goBack(){
			uni.navigateBack();
		},
		// 跳转到指定题目
		toQuestion(index){
			this.index = index;
			this.$refs.popup.close();
		},
		// 展示答题卡
		showCard(){
			this.isShowCard = true;
			this.$refs.popup.open();
		},
		// 切换题目
		changeQuestion(e){
			this.index = e.detail.current;
		},
		// 获取数据
		getDetail(){
			let _this = this;
			uni.showLoading({title:'加载中'});
			uni.request({
				url: this.$API.edutExamRecordDetail,
				data: {
					userid: this.userid,
					log_id: this.log_id
				},
				header: this.$API.get_head(),
				success: (res)=>{
					uni.hideLoading();
					_this.list = res.data.data;
				},
				fail: ()=>{
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: '加载失败'
					})
				}
			})
		}
	}
}
</script>

<style scoped>
.status_bar{
	width: 100%;
	height: var(--status-bar-height);
	background: #fff;
}

.btn{
	text-align: center;
	padding-top: ;
}
.btn button{
	width: 240upx;
}

.title{
	font-size: 32upx;
	font-weight: bold;
	text-indent: 24upx;
	position: relative;
}
.title::before{
	content: '';
	width: 6upx;
	height: 30upx;
	background: #5F96F2;
	position: absolute;
	top: 14upx;
	left: 0;
}

/*答题卡*/
.answer-card{
	height: 500upx;
	background: #fff;
}
.answer-card-title{
	height: 70upx;
	line-height: 70upx;
	font-size: 32upx;
	text-align: center;
	position: relative;
}
.answer-card-title text::before,
.answer-card-title text::after{
	content: '';
	width: calc(50% - 120upx);
	height: 2upx;
	background: #ccc;
	position: absolute;
	top: 50%;
}
.answer-card-title text::before{
	left: 60upx;
}
.answer-card-title text::after{
	right: 60upx;
}
.answer-card-content{
	height: calc(100% - 70upx);
	overflow: hidden;
	padding: 20upx 20upx 0;
}
.answer-card-content>view{
	float: left;
	margin: 0 20upx 20upx 0;
	width: calc((100% - 180upx) / 10);
	height: 60upx;
}
.answer-card-content>view:nth-child(10n){
	margin-right: 0;
}
.answer-card-content .item{
	width: 100%;
	height: 100%;
	line-height: 60upx;
	color: #fff;
	background: #999;
	font-size: 26upx;
	text-align: center;
}
.answer-card-content .item.success{
	background: #51AEE6;
}
.answer-card-content .item.error{
	background: red;
}

/*滑动*/
swiper{
	margin: 12upx 0;
	height: calc(100vh - 120upx - 24upx - 88upx - var(--status-bar-height));
}
swiper swiper-item .swiper-item{
	height: 100%;
	background: #fff;
	overflow-y: auto;
	margin-right: 10upx;
	border-radius: 10upx;
	box-sizing: border-box;
	border: 2upx solid #EEE;
	padding: 24upx 20upx 160upx;
	box-shadow: 2upx 4upx 4upx #eee;
	position: relative;
}
swiper swiper-item .swiper-item .tag{
	width: 100%;
	color: #999;
	height: 60upx;
	line-height: 60upx;
	font-size: 32upx;
	text-align: center;
	position: fixed;
	bottom: 60upx;
	left: 0;
}
swiper swiper-item .swiper-item .result{
	color: #51AEE6;
	margin: 10upx 0;
	font-size: 32upx;
}
swiper swiper-item .swiper-item .result.error{
	color: red;
}
swiper swiper-item:last-child .swiper-item{
	margin-right: 0;
}
swiper swiper-item .swiper-item .title{
	font-weight: normal;
}
swiper swiper-item .swiper-item .content{
	color: #666;
	font-size: 30upx;
	margin-bottom: 10upx;
}
swiper swiper-item .swiper-item .content.judge{
	justify-content: center;
}
swiper swiper-item .swiper-item .content.judge uni-icons,
swiper swiper-item .swiper-item .content.judge .uni-icons{
	margin: 0 30upx;
}
swiper swiper-item .swiper-item .content.check>view{
	border-bottom: 2upx solid #ccc;
}
swiper swiper-item .swiper-item .content.check>view .label{
	color: #333;
	font-size: 32upx;
}

/*顶部*/
.main-top{
	padding: 0 30upx;
	height: 120upx;
	background: #fff;
}
.main-top .left image{
	width: 40upx;
	height: 40upx;
	margin-right: 10upx;
}
.main-top .left text{
	color: red;
	font-size: 24upx;
}
.main-top .right text:first-child{
	color: red;
	font-size: 36upx;
	font-weight: bold;
	margin-top: -4upx;
	margin-right: 10upx;
}
.main-top .right text:last-child{
	font-size: 24upx;
}
</style>
